<template>
    <div class="bottombar">
        <div class="inner">
            <div class="title">联系我</div>
            <div class="contact-info">
                <div class="item">
                    <span class="key phone">电话:</span>
                    <span class="value">13191824646</span>
                </div>
                <div class="item text-right">
                    <span class="key email">邮箱:</span>
                    <span class="value">3108388504@qq.com</span>
                </div>
                <div class="item">
                    <span class="key qq">Q&nbsp;Q:</span>
                    <span class="value">3108388504</span>
                </div>
                <div class="item text-right">
                    <span class="key wechat">微信:</span>
                    <span class="value">Wff3108388504</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    
</script>

<style scoped lang="scss">
    .bottombar{
        background-color: #2B3341;
        padding: 20px 0;
        .inner{
            height: 100%;
            margin: 0 auto;
            max-width: 800px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .title{
                font-size: 30px;
                margin-bottom: 20px;
            }
            .contact-info{
                display: grid;
                grid-template-columns: repeat(2,1fr);
                gap: 10px 0;
                max-width: 800px;
                .key{
                    margin-right: 5px;
                    font-size: 18px;
                }
                .phone{
                    color: #FFB74B;
                }
                .email{
                    color: #00BCEA;
                }
                .qq{
                    color: #FF5F93;
                }
                .wechat{
                    color: #10C469;
                }
                .value{
                    color: rgba(255, 255, 255, 0.8);
                }
            }
        }
    }
    @media (max-width:450px){
        .bottombar .inner .contact-info{
            grid-template-columns: 1fr;
        }
    }
</style>